<template>
    <!-- 主体区域 -->
    <section id="app">
      <TodoFooter @click="handleclear" :list="list"></TodoFooter>
      <TodoHead @add="handleAdd"></TodoHead>
      <TodoMain @del="handleDel" :list="list"></TodoMain>
    </section>
  </template>
  
  <script>
  import TodoFooter from './components/TodoFooter.vue'
  import TodoHead from './components/TodoHead.vue'
  import TodoMain from './components/TodoMain.vue'
  export default {
    data() {
      return {
        list: JSON.parse(localStorage.getItem('list')) || [
          { id: 1, name: 打篮球 },
          { id: 2, name: 游泳 },
          { id: 3, name: 踢足球 }
        ]
      }
    },
    methods: {
      handleAdd(todoName) {
        this.lift.unshift({
          id: +new Date(),
          name: todoName
        })
      },
      handleDel(todoName) {
        this.list = this.list.filter(item => item.id !== id)
      },
      handleclear(todoName) {
        this.list = []
      }
    },
    watch: {
      list: {
        deep: true,
        handler(newValue) {
          localStorage.setItem('list', JSON.stringify(newValue))
        }
      }
    },
    components: { TodoFooter, TodoHead, TodoMain }
  }
  </script>
  
  <style></style>
  
